<template>
  <div id="register" v-title data-title="注册 - ">

    <div class="night">
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
    </div>

    <!-- 注册框容器，应用了圆角样式 -->
    <div class="me-login-box me-login-box-radius">

      <!-- 注册框的标题 -->
      <h1>Blog 注册</h1>

      <!-- 使用 Element UI 的表单组件 -->
      <el-form ref="userForm" :model="userForm" :rules="rules">

        <!-- 用户名输入框 -->
        <el-form-item prop="account">
          <!-- 用户名输入框，绑定到 userForm.account -->
          <el-input placeholder="用户名" v-model="userForm.account"></el-input>
        </el-form-item>

        <!-- 昵称输入框 -->
        <el-form-item prop="nickname">
          <!-- 昵称输入框，绑定到 userForm.nickname -->
          <el-input placeholder="昵称" v-model="userForm.nickname"></el-input>
        </el-form-item>

        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <!-- 密码输入框，绑定到 userForm.password -->
          <el-input placeholder="密码" v-model="userForm.password"></el-input>
        </el-form-item>

        <!-- 注册按钮，样式大小为小，点击时触发 register 方法 -->
        <el-form-item size="small" class="me-login-button">
          <!-- 点击按钮时，调用 register 方法，并传入 'userForm' 作为参数，@click.native.prevent 用于阻止默认行为 -->
          <el-button type="primary" @click.native.prevent="register('userForm')">注册</el-button>
        </el-form-item>
      </el-form>

      <!-- 设计信息区域，显示设计者信息 -->
      <div class="me-login-design">
        <p>Designed by
          <strong>
            <!-- 路由链接，点击后跳转到首页，带有特殊样式 -->
            <router-link to="/" class="me-login-design-color">安师大麦克斯韦方程组</router-link>
          </strong>
        </p>
      </div>

    </div>


  </div>
</template>

<script>
  import {register} from '@/api/login'

  export default {
    name: 'Register',
    data() {
      return {
        userForm: {
          account: '',
          nickname: '',
          password: ''
        },
        rules: {
          account: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {max: 10, message: '不能大于10个字符', trigger: 'blur'}
          ],
          nickname: [
            {required: true, message: '请输入昵称', trigger: 'blur'},
            {max: 10, message: '不能大于10个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {max: 10, message: '不能大于10个字符', trigger: 'blur'}
          ]
        }

      }
    },
    methods: {
      register(formName) {
        let that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {

            that.$store.dispatch('register', that.userForm).then(() => {
              that.$message({message: '注册成功 快写文章吧', type: 'success', showClose: true});
              that.$router.push({path: '/'})
            }).catch((error) => {
              if (error !== 'error') {
                that.$message({message: error, type: 'error', showClose: true});
              }
            })

          } else {
            return false;
          }
        });

      }

    }
  }

</script>

<style scoped>
#register {
  /* 设置最小宽度为100%，确保元素宽度至少为视口宽度 */
  min-width: 100%;

  /* 设置最小高度为100%，确保元素高度至少为视口高度 */
  min-height: 100%;

  /* 设置背景颜色为深色 */
  background-color: #151514;

  /* 设置元素的高度为100vh（视口高度），确保填满整个屏幕 */
  height: 100vh;

  /* 隐藏溢出的内容，防止出现滚动条 */
  overflow: hidden;

  /* 使用flex布局模型，使内容居中 */
  display: flex;

  /* 设置字体为"Anton"，如果没有该字体则使用无衬线字体 */
  font-family: "Anton", sans-serif;

  /* 使用flex布局的属性，水平居中 */
  justify-content: center;

  /* 使用flex布局的属性，垂直居中 */
  align-items: center;
}




/* 设置登录框的样式 */
  .me-login-box {
    /* 使用绝对定位使元素相对于其最近的定位祖先元素进行定位 */
    position: absolute;

    /* 设置登录框的宽度为300px */
    width: 300px;

    /* 设置登录框的高度为320px */
    height: 320px;

    /* 设置登录框的背景颜色为白色 */
    background-color: white;

    /* 设置登录框的上边距为0px */
    margin-top: 0px;

    /* 设置登录框的左边距为负值，向左偏移180px */
    margin-left: -180px;

    /* 设置登录框的左边缘相对于其容器的50%位置（实现水平居中） */
    left: 50%;

    /* 设置登录框内部的内边距为30px，确保内容不贴边 */
    padding: 30px;
  }


  /* 设置带圆角、阴影效果和半透明背景色的登录框样式 */
  .me-login-box-radius {
    /* 设置登录框的圆角半径为10px，形成圆滑的边角 */
    border-radius: 10px;

    /* 设置登录框的阴影效果：
       - 水平偏移 0px
       - 垂直偏移 0px
       - 模糊半径 1px
       - 扩展半径 1px
       - 使用rgba(161, 159, 159, 0.1)颜色，带有10%透明度的浅灰色阴影 */
    box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);

    /* 设置登录框的背景颜色为半透明黑色，rgba的最后一个值（0.5）表示透明度为50% */
    background-color: rgba(0, 0, 0, 0.5);
  }


  /* 设置登录框中h1标题的样式 */
  .me-login-box h1 {
    /* 设置文本居中对齐 */
    text-align: center;

    /* 设置字体大小为24px */
    font-size: 24px;

    /* 设置下边距为20px，增加与下方内容的间距 */
    margin-bottom: 20px;

    /* 设置垂直对齐方式为中间（但对块级元素如h1影响较小，一般用于行内元素） */
    vertical-align: middle;
  }


  /* 设置登录框设计部分的文本样式 */
  .me-login-design {
    /* 设置文本居中对齐 */
    text-align: center;

    /* 设置字体为 'Open Sans'，如果该字体不可用则使用系统默认的 sans-serif 字体 */
    font-family: 'Open Sans', sans-serif;

    /* 设置字体大小为18px */
    font-size: 18px;
  }


  /* 设置登录框设计部分文本的颜色 */
  .me-login-design-color {
    /* 设置文本颜色为 #5FB878（绿色），并使用 !important 强制应用该样式 */
    color: #5FB878 !important;
  }


  .me-login-button {
    text-align: center;
  }

  .me-login-button button {
    width: 100%;
  }
  .me-login-box h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    vertical-align: middle;
    color: #fff; /* 设置标题"Blog 注册"的文字颜色为白色 */
  }

  .me-login-design {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #fff; /* 设置"Designed by"的文字颜色为白色 */
  }

  .me-login-design-color {
    color: #fff !important; /* 确保链接颜色也为白色 */
  }

  .night {
    position: relative;
    width: 100%;
    height: 200%;
    transform: rotateZ(139deg);
  }

.shooting_star {
  /* 设置元素的定位为绝对定位，脱离正常文档流 */
  position: absolute;

  /* 将元素水平居中，位置在父容器的50%宽度 */
  left: 50%;

  /* 将元素垂直居中，位置在父容器的50%高度 */
  top: 50%;

  /* 设置元素的高度为2px，模拟流星的细长效果 */
  height: 2px;

  /* 设置背景为线性渐变，从蓝色到透明，模拟流星的亮尾效果 */
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));

  /* 设置圆角，使其边缘更柔和，形成流星尾巴的效果 */
  border-radius: 999px;

  /* 设置阴影效果，使流星看起来发光 */
  filter: drop-shadow(0 0 6px #699bff);

  /* 设置动画效果：尾巴（tail）和流星本身（shooting）的动画 */
  /* 使用webkit前缀保证在WebKit内核浏览器中的兼容性 */
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;

  /* 设置标准的CSS动画 */
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}


.shooting_star::before {
  /* 伪元素的内容为空，目的是通过伪元素来创建额外的视觉效果 */
  content: "";

  /* 设置伪元素的定位为绝对定位，脱离正常文档流 */
  position: absolute;

  /* 设置伪元素垂直位置为元素顶部50%减去1px的两倍，确保流星尾巴的位置合适 */
  top: calc(50% - 1px * 2);

  /* 将伪元素水平放置到右边 */
  right: 0;

  /* 设置伪元素的高度为2px，保持和主元素一致 */
  height: 2px;

  /* 设置背景为线性渐变，透明到蓝色，再到透明，模拟流星的尾巴效果 */
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));

  /* 设置伪元素的旋转和平移效果，使其形成流星尾巴的方向 */
  transform: translateX(50%) rotateZ(45deg);

  /* 设置圆角，确保伪元素的尾巴部分也具有柔和的效果 */
  border-radius: 100%;

  /* 设置伪元素的闪烁动画，使用webkit前缀确保兼容性 */
  -webkit-animation: shining 3000ms ease-in-out infinite;

  /* 设置标准的CSS动画，定义闪烁效果 */
  animation: shining 3000ms ease-in-out infinite;
}


.shooting_star::after {
  /* 伪元素的内容为空，目的是通过伪元素来创建额外的视觉效果 */
  content: "";

  /* 设置伪元素的定位为绝对定位，脱离正常文档流 */
  position: absolute;

  /* 设置伪元素垂直位置为元素顶部50%减去1px的两倍，确保流星尾巴的位置合适 */
  top: calc(50% - 1px * 2);

  /* 将伪元素水平放置到右边 */
  right: 0;

  /* 设置伪元素的高度为2px，保持与主元素和其他伪元素一致 */
  height: 2px;

  /* 设置背景为线性渐变，透明到蓝色，再到透明，模拟流星尾巴的渐变效果 */
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));

  /* 设置伪元素的旋转和平移效果，使其形成流星尾巴的方向 */
  transform: translateX(50%) rotateZ(45deg);

  /* 设置圆角，确保伪元素的尾巴部分也具有柔和的效果 */
  border-radius: 100%;

  /* 设置伪元素的闪烁动画，使用webkit前缀确保兼容性 */
  -webkit-animation: shining 3000ms ease-in-out infinite;

  /* 设置标准的CSS动画，定义闪烁效果 */
  animation: shining 3000ms ease-in-out infinite;

  /* 覆盖之前的transform属性，反向旋转伪元素，改变尾巴方向 */
  transform: translateX(50%) rotateZ(-45deg);
}


.shooting_star:nth-child(1) {
  /* 设置第一个流星的位置，top 属性使其垂直居中并进行微调，调整偏移量以确保位置合适 */
  top: calc(50% - -4px * 2);

  /* 设置第一个流星的水平位置，left 属性使其在水平上偏移248px，以便它出现在父元素的左侧 */
  left: calc(50% - 248px);

  /* 设置第一个流星动画的延迟时间，使用-webkit前缀确保兼容性，延迟3060毫秒后才开始动画 */
  -webkit-animation-delay: 3060ms;

  /* 设置标准的动画延迟时间，延迟3060毫秒后才开始动画 */
  animation-delay: 3060ms;
}


/* 为第一个 .shooting_star 元素的 ::before 和 ::after 伪元素添加动画延迟 */
.shooting_star:nth-child(1)::before,
.shooting_star:nth-child(1)::after {
  /* 设置动画延迟时间为 3060 毫秒 */
  -webkit-animation-delay: 3060ms; /* 适用于 Webkit 内核浏览器 */
  animation-delay: 3060ms; /* 标准动画延迟 */
}


/* 为第二个 .shooting_star 元素设置位置和动画延迟 */
.shooting_star:nth-child(2) {
  /* 通过 calc() 函数计算 top 位置，50% 是视口的垂直中心，再减去 180px * 2 的偏移量 */
  top: calc(50% - 180px * 2); /* 设置垂直位置 */

  /* 通过 calc() 函数计算 left 位置，50% 是视口的水平中心，再减去 166px 的偏移量 */
  left: calc(50% - 166px); /* 设置水平位置 */

  /* 为该元素的动画设置延迟，延迟时间为 4693 毫秒 */
  -webkit-animation-delay: 4693ms; /* 适用于 Webkit 内核浏览器（如 Chrome） */
  animation-delay: 4693ms; /* 标准动画延迟 */
}


/* 为第二个 .shooting_star 元素的 ::before 和 ::after 伪元素设置动画延迟 */
.shooting_star:nth-child(2)::before,
.shooting_star:nth-child(2)::after {
  /* 为这两个伪元素设置动画延迟，延迟时间为 4693 毫秒 */
  -webkit-animation-delay: 4693ms; /* 适用于 Webkit 内核浏览器（如 Chrome） */
  animation-delay: 4693ms; /* 标准动画延迟 */
}


/* 为第三个 .shooting_star 元素设置位置和动画延迟 */
.shooting_star:nth-child(3) {
  /* 通过 calc() 函数计算 top 位置，50% 是视口的垂直中心，再加上 88px * 2 的偏移量 */
  top: calc(50% - -88px * 2); /* 设置垂直位置，'-88px * 2' 实际上是加上 176px 偏移 */

  /* 通过 calc() 函数计算 left 位置，50% 是视口的水平中心，再减去 136px 的偏移量 */
  left: calc(50% - 136px); /* 设置水平位置 */

  /* 为该元素的动画设置延迟，延迟时间为 1178 毫秒 */
  -webkit-animation-delay: 1178ms; /* 适用于 Webkit 内核浏览器（如 Chrome） */
  animation-delay: 1178ms; /* 标准动画延迟 */
}


/* 为第三个 .shooting_star 元素的 ::before 和 ::after 伪元素设置动画延迟 */
.shooting_star:nth-child(3)::before,
.shooting_star:nth-child(3)::after {
  /* 为这两个伪元素设置动画延迟，延迟时间为 1178 毫秒 */
  -webkit-animation-delay: 1178ms; /* 适用于 Webkit 内核浏览器（如 Chrome） */
  animation-delay: 1178ms; /* 标准动画延迟 */
}


.shooting_star:nth-child(4) {
    top: calc(50% - 92px * 2);
    left: calc(50% - 92px);
    -webkit-animation-delay: 9285ms;
    animation-delay: 9285ms;
  }

  .shooting_star:nth-child(4)::before,
  .shooting_star:nth-child(4)::after {
    -webkit-animation-delay: 9285ms;
    animation-delay: 9285ms;
  }

  .shooting_star:nth-child(5) {
    top: calc(50% - 89px * 2);
    left: calc(50% - 92px);
    -webkit-animation-delay: 5475ms;
    animation-delay: 5475ms;
  }

  .shooting_star:nth-child(5)::before,
  .shooting_star:nth-child(5)::after {
    -webkit-animation-delay: 5475ms;
    animation-delay: 5475ms;
  }

  .shooting_star:nth-child(6) {
    top: calc(50% - -164px * 2);
    left: calc(50% - 27px);
    -webkit-animation-delay: 9220ms;
    animation-delay: 9220ms;
  }

  .shooting_star:nth-child(6)::before,
  .shooting_star:nth-child(6)::after {
    -webkit-animation-delay: 9220ms;
    animation-delay: 9220ms;
  }

  .shooting_star:nth-child(7) {
    top: calc(50% - -136px * 2);
    left: calc(50% - 243px);
    -webkit-animation-delay: 7942ms;
    animation-delay: 7942ms;
  }

  .shooting_star:nth-child(7)::before,
  .shooting_star:nth-child(7)::after {
    -webkit-animation-delay: 7942ms;
    animation-delay: 7942ms;
  }

  .shooting_star:nth-child(8) {
    top: calc(50% - 174px * 2);
    left: calc(50% - 75px);
    -webkit-animation-delay: 8312ms;
    animation-delay: 8312ms;
  }

  .shooting_star:nth-child(8)::before,
  .shooting_star:nth-child(8)::after {
    -webkit-animation-delay: 8312ms;
    animation-delay: 8312ms;
  }

  .shooting_star:nth-child(9) {
    top: calc(50% - 138px * 2);
    left: calc(50% - 281px);
    -webkit-animation-delay: 6475ms;
    animation-delay: 6475ms;
  }

  .shooting_star:nth-child(9)::before,
  .shooting_star:nth-child(9)::after {
    -webkit-animation-delay: 6475ms;
    animation-delay: 6475ms;
  }

  .shooting_star:nth-child(10) {
    top: calc(50% - 25px * 2);
    left: calc(50% - 25px);
    -webkit-animation-delay: 7118ms;
    animation-delay: 7118ms;
  }

  .shooting_star:nth-child(10)::before,
  .shooting_star:nth-child(10)::after {
    -webkit-animation-delay: 7118ms;
    animation-delay: 7118ms;
  }

  .shooting_star:nth-child(11) {
    top: calc(50% - 184px * 2);
    left: calc(50% - 198px);
    -webkit-animation-delay: 8570ms;
    animation-delay: 8570ms;
  }

  .shooting_star:nth-child(11)::before,
  .shooting_star:nth-child(11)::after {
    -webkit-animation-delay: 8570ms;
    animation-delay: 8570ms;
  }

  .shooting_star:nth-child(12) {
    top: calc(50% - -194px * 2);
    left: calc(50% - 283px);
    -webkit-animation-delay: 1026ms;
    animation-delay: 1026ms;
  }

  .shooting_star:nth-child(12)::before,
  .shooting_star:nth-child(12)::after {
    -webkit-animation-delay: 1026ms;
    animation-delay: 1026ms;
  }

  .shooting_star:nth-child(13) {
    top: calc(50% - 169px * 2);
    left: calc(50% - 42px);
    -webkit-animation-delay: 4957ms;
    animation-delay: 4957ms;
  }

  .shooting_star:nth-child(13)::before,
  .shooting_star:nth-child(13)::after {
    -webkit-animation-delay: 4957ms;
    animation-delay: 4957ms;
  }

  .shooting_star:nth-child(14) {
    top: calc(50% - -114px * 2);
    left: calc(50% - 139px);
    -webkit-animation-delay: 5748ms;
    animation-delay: 5748ms;
  }

  .shooting_star:nth-child(14)::before,
  .shooting_star:nth-child(14)::after {
    -webkit-animation-delay: 5748ms;
    animation-delay: 5748ms;
  }

  .shooting_star:nth-child(15) {
    top: calc(50% - 140px * 2);
    left: calc(50% - 283px);
    -webkit-animation-delay: 2809ms;
    animation-delay: 2809ms;
  }

  .shooting_star:nth-child(15)::before,
  .shooting_star:nth-child(15)::after {
    -webkit-animation-delay: 2809ms;
    animation-delay: 2809ms;
  }

  .shooting_star:nth-child(16) {
    top: calc(50% - 72px * 2);
    left: calc(50% - 88px);
    -webkit-animation-delay: 8661ms;
    animation-delay: 8661ms;
  }

  .shooting_star:nth-child(16)::before,
  .shooting_star:nth-child(16)::after {
    -webkit-animation-delay: 8661ms;
    animation-delay: 8661ms;
  }

  .shooting_star:nth-child(17) {
    top: calc(50% - 40px * 2);
    left: calc(50% - 273px);
    -webkit-animation-delay: 8037ms;
    animation-delay: 8037ms;
  }

  .shooting_star:nth-child(17)::before,
  .shooting_star:nth-child(17)::after {
    -webkit-animation-delay: 8037ms;
    animation-delay: 8037ms;
  }

  .shooting_star:nth-child(18) {
    top: calc(50% - 176px * 2);
    left: calc(50% - 27px);
    -webkit-animation-delay: 826ms;
    animation-delay: 826ms;
  }

  .shooting_star:nth-child(18)::before,
  .shooting_star:nth-child(18)::after {
    -webkit-animation-delay: 826ms;
    animation-delay: 826ms;
  }

  .shooting_star:nth-child(19) {
    top: calc(50% - -164px * 2);
    left: calc(50% - 229px);
    -webkit-animation-delay: 1822ms;
    animation-delay: 1822ms;
  }

  .shooting_star:nth-child(19)::before,
  .shooting_star:nth-child(19)::after {
    -webkit-animation-delay: 1822ms;
    animation-delay: 1822ms;
  }

  .shooting_star:nth-child(20) {
    top: calc(50% - 85px * 2);
    left: calc(50% - 161px);
    -webkit-animation-delay: 5305ms;
    animation-delay: 5305ms;
  }

  .shooting_star:nth-child(20)::before,
  .shooting_star:nth-child(20)::after {
    -webkit-animation-delay: 5305ms;
    animation-delay: 5305ms;
  }

  .shooting_star:nth-child(21) {
    top: calc(50% - 100px * 2);
    left: calc(50% - 300px);
    -webkit-animation-delay: 4305ms;
    animation-delay: 4305ms;
  }

  .shooting_star:nth-child(21)::before,
  .shooting_star:nth-child(21)::after {
    -webkit-animation-delay: 4305ms;
    animation-delay: 4305ms;
  }

  @-webkit-keyframes tail {
    0% {
      width: 0;
    }

    30% {
      width: 100px;
    }

    100% {
      width: 0;
    }
  }

  @keyframes tail {
    0% {
      width: 0;
    }

    30% {
      width: 100px;
    }

    100% {
      width: 0;
    }
  }

  @-webkit-keyframes shining {
    0% {
      width: 0;
    }

    50% {
      width: 30px;
    }

    100% {
      width: 0;
    }
  }

  @keyframes shining {
    0% {
      width: 0;
    }

    50% {
      width: 30px;
    }

    100% {
      width: 0;
    }
  }

  @-webkit-keyframes shooting {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(300px);
    }
  }

  @keyframes shooting {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(300px);
    }
  }

  @-webkit-keyframes sky {
    0% {
      transform: rotate(45deg);
    }

    100% {
      transform: rotate(405deg);
    }
  }

  @keyframes sky {
    0% {
      transform: rotate(45deg);
    }

    100% {
      transform: rotate(405deg);
    }
  }
</style>
